import React, { useState, useEffect, useRef } from 'react'
import { ArrowLeftOutlined } from '@ant-design/icons';
import { Input, message } from 'antd';
import { useNavigate } from 'react-router-dom';
import axios from 'axios';
// import Item from 'antd/es/list/Item';
export default function Yzm() {
    let navigate = useNavigate()
    let [nums, setNum] = useState(60)
    const [messageApi, contextHolder] = message.useMessage();
    const onChange = async (text) => {
        console.log('onChange:', text);
        let { data } = await axios.post('http://localhost:3000/users/yzmdl', { yzm: text })
        if (data.code === 200) {
            console.log(data);
            sessionStorage.user=JSON.stringify(data.data)
            sessionStorage.userid=JSON.stringify(data.data._id)
            navigate('/app/home')
        } else {
            messageApi.open({
                type: 'error',
                content: '验证码错误',
            });
            return
        }

    };
    useEffect(() => {
        time()
    }, [])

    const codeRef = useRef()

    // let time = () => {
    //     let num = 60
    //     setInterval(() => {
    //         num--
    //         codeRef.current.innerHTML=`${num}s后重新获取`
    //     }, 1000)
    // }

    let time=()=>{
        let num=60
        let timer=setInterval(()=>{
            num--
            setNum(num)
            if(num===0){
                clearInterval(timer)
                
            }
        },1000)
    }
    let cxhq= async()=>{
        time()
        let {data}=await axios.post(`http://localhost:3000/users/sjh`,{phone:sessionStorage.phone})
        console.log(data);
    }

    const sharedProps = {
        onChange,
    };
    return (
        <div>
            {contextHolder}
            <div style={{padding:'20px 10px'}}>
                <ArrowLeftOutlined style={{ fontSize: '20px', width: '28px' }} onClick={()=>{
                    navigate('/login')
                }} />
            </div>
            <div style={{ height: '10vh' }}></div>


            <div style={{ textAlign: 'center' }}>
                <div style={{ fontSize: '3vh', padding: '10px' }}>
                    输入验证码
                </div>
                <div style={{}}>
                    短信已发送至+{sessionStorage.phone}
                </div>
            </div>
            <div style={{ textAlign: 'center', padding: '3vh 0' }}>
                <Input.OTP variant="filled"  {...sharedProps} />
            </div>
            <div style={{ textAlign: 'center', padding: '3vh 0', color:'#507BFD'}}>
                {nums ? <span ref={codeRef}>
                    {nums}s后可重新获取
                </span> : <span onClick={()=>{
                    cxhq()
                }}>
                    重新获取
                </span>}
            </div>
        </div>
    )
}
